<template>
    <div>
        <el-form :model="employeeForm" :rules="rules" label-position="right" ref="employeeForm" label-width="160px">  
                
                <el-form-item label="用户帐号：" prop="u_username">
                    <el-col :span="8">
                        <el-input disabled v-model="employeeForm.u_username" placeholder="请输入用户帐号"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="用户密码：" prop="u_password">
                    <el-col :span="8">
                        <el-input v-model="employeeForm.u_password" placeholder="请输入用户密码"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="用户昵称：" prop="u_nickname">
                    <el-col :span="8">
                        <el-input v-model="employeeForm.u_nickname" placeholder="请输入用户昵称"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="手机号码：" prop="u_phone">
                    <el-col :span="8">
                        <el-input v-model="employeeForm.u_phone" placeholder="请输入手机号码"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="邮箱地址：" prop="u_email">
                    <el-col :span="8">
                        <el-input v-model="employeeForm.u_email" placeholder="请输入邮箱地址"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="是否激活：" prop="u_is_activation">
                    <el-switch
                            v-model="employeeForm.u_is_activation"
                            active-color="#13ce66"
                            inactive-color="#ccc">
                    </el-switch>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('employeeForm')">提交</el-button>
                </el-form-item>
            </el-form>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
                //进行必填的验证
                rules: {
                    u_username: [
                        { required: true, message: '请输入用户帐号', trigger: 'blur' }
                    ],
                    u_password: [
                        { required: true, message: '请输入用户密码', trigger: 'blur' }
                    ],
                    u_nickname: [
                        { required: true, message: '请输入用户昵称', trigger: 'blur' }
                    ],
                    u_phone: [
                        { required: true, message: '请输入手机号码', trigger: 'change'},
                    ],
                    u_email: [
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { message: '请输入正确的邮箱地址',type: 'email' }
                    ]
                }
            }
        },
        //初始化函数
        mounted() {

            //获取当前用户信息
            this.$myLoading.startLoading()
            this.$http.getHttp(this.$API.userSearch + "/u_id/" + this.$route.query.u_id, rs => {
                this.$myLoading.endLoading()
                this['EditEmployeeModule/updateEmployeeForm'](rs.data[0])
            });

        },
        //计算属性
        computed: {
            ...mapState({ 
                employeeForm : state => state.EditEmployeeModule.employeeForm
            })
        },
        //组件方法
        methods: {
            ...mapMutations(['updateEmployeeForm','EditEmployeeModule/updateEmployeeForm']),

            //提交信息
            submitForm(form) {

                //菜单添加
                this.$refs[form].validate((valid) => {

                    if (valid) {

                        //添加信息
                        var params = {
                            update_where    : "u_id",
                            u_id            : this.$route.query.u_id,
                            u_nickname      : this.employeeForm.u_nickname,
                            u_password      : this.employeeForm.u_password,
                            u_phone         : this.employeeForm.u_phone,
                            u_email         : this.employeeForm.u_email,
                            u_is_activation : this.employeeForm.u_is_activation == true ? 1 : 0
                        }
                        
                        this.$myLoading.startLoading()
                        this.$http.postHttp(this.$API.userUpdate,params,(rs) => {
                            this.$myLoading.endLoading()
                            this.$myPop.SuccessMessage()
                            setTimeout(()=>{
                                this.$router.go(-1)
                            },1000)
                        })
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style lang="stylus" scoped>

</style>